<template>
  <div
    class="ad_wraps"
    :style="{
      backgroundColor: bgColor,
      backgroundImage: bgImg
    }"
  >
    <!-- 主banner -->
    <maintop
      v-if="adMinTopData"
      :adMinTopData="adMinTopData"
      :conferenceId="conferenceId"
    />
    <!--秒杀-->
    <sec-kill-index
      v-if="secKillData.length"
      :title="title"
      :secKillData="secKillData"
    />
    <!-- 热卖hot-->
    <div class="ad_hot" v-if="navList.length > 0">
      <p class="hot_title"></p>
      <!-- <nav-bar
        :navList="navList"
        :navBarFixed="NavBarFixed"
        :title="title"
        :curIndex="active"
      /> -->
      <van-tabs
        v-if="navList.length"
        sticky
        v-model="active"
        :line-width="15"
        :line-height="6"
        :ellipsis="false"
        background="#FFFFFF"
        class="top_pro_wrap"
        :class="NavBarFixed == true ? 'fixed_nav_padding' : ''"
      >
        <van-tab v-for="(v, index) in navList" :key="index">
          <div slot="title" class="li_single" @click="select(v, index)">
            <p>
              {{ v.activityTagName }}
            </p>
          </div>
        </van-tab>
      </van-tabs>
      <div
        class="list_wrap"
        v-if="navdata"
        :class="NavBarFixed == true ? 'fixed_list_wrap' : ''"
      >
        <item
          :obj="v"
          :key="index"
          v-for="(v, index) in navList"
          :index="index"
          :conferenceId="conferenceId"
          :title="title"
        />
      </div>
    </div>
  </div>
</template>

<script>
import { throttle } from 'lodash';
import maintop from './components/po/mainTop.vue';
import item from './components/po/item.vue';
// import navBar from './components/po/navBar.vue';
import secKillIndex from './components/po/secKillIndex.vue';
import { tabListRes, dataInfo } from './json/promotion';

export default {
  name: 'promotion',
  components: {
    // navBar,
    secKillIndex,
    maintop,
    item
  },
  data() {
    return {
      title: document.title,
      conferenceId: window.conferenceId,
      bgColor: window.bgColor,
      bgImg: window.bgImg,
      adMinTopData: window.adMinTopData,
      count: '9',
      navList: [],
      navdata: null,
      NavBarFixed: false,
      shareFlag: window.shareFlag, // 1为关闭，0 为开启；
      active: '0',
      secKillData: [
        {
          index: 0,
          timeStr: '12:00',
          status: 1,
          selectFlag: 1
        },
        {
          index: 1,
          timeStr: '13:00',
          status: 2,
          selectFlag: 1
        },
        {
          index: 2,
          timeStr: '15:00',
          status: 2,
          selectFlag: 1
        }
      ]
    };
  },
  /**
   * keep-alive 跟 路由守卫配合使用时，【注意next的执行时机】
   * 当利用了路由守卫后的情况
   * 1: 初次渲染这个页面时：
   * …=>
   * beforeRouteEnter()=>
   * activated()=>
   * next()(beforeRouteEnter中的方法)=>
   * …=>
   * beforeRouteLeave()
   * =>deactivated()。
   * 2: 再次进入这个页面
   * …=>
   * beforeRouteEnter()=>
   * next()(beforeRouteEnter中的方法)=>
   * activated()=>
   * …=>
   * beforeRouteLeave()=>
   * deactivated()。
   */
  async beforeRouteEnter(to, from, next) {
    console.log('beforeRouteEnter==', to.query.conferenceId);
    // window.conferenceId = to.query.conferenceId;
    // const res = await getBanner({
    //   conferenceId: to.query.conferenceId,
    //   shopBizCode: staticQuery.shopId
    // }).catch(err => {
    //   console.log(err);
    //   next();
    // });
    // if (res.code === 0 && res.data) {
    //   window.adMinTopData = res.data;
    //   window.shareFlag = res.data.poster.shareFlag;
    //   window.bgColor = res.data.bgColor;
    //   window.bgImg = `url(${res.data.bgImg})`;
    //   document.title = res.data.name;
    // }
    next();
  },
  created() {
    if (!this.adMinTopData) {
      this.adMinTopData = window.adMinTopData;
    }
    if (!this.bgColor) {
      this.bgColor = window.bgColor;
    }
    if (!this.bgImg) {
      this.bgImg = window.bgImg;
    }
    if (!this.conferenceId) {
      this.conferenceId = window.conferenceId;
    }
    if (!this.title) {
      this.title = document.title;
    }
    if (!this.shareFlag) {
      this.shareFlag = window.shareFlag;
    }
    // 数据请求
    this.queryTabList();
  },
  activated() {
    this.NavBarFixed = false;
  },
  mounted() {
    this.throttleLoad = throttle(this.handleScroll, 100);
    window.addEventListener('scroll', this.throttleLoad);
  },
  destroyed() {
    window.removeEventListener('scroll', this.throttleLoad);
  },
  computed: {},
  methods: {
    select(v, index) {
      this.active = index;
      const anchor = document.querySelector(`#anchor-${v.activityTagNo}`);
      if (anchor) {
        window.scroll(0, anchor.offsetTop - 48);
      }
    },
    handleScroll() {
      const scrollTopNavLi = document.querySelectorAll('.li_single');
      const scrollTopConSingle = document.querySelectorAll('.item');
      if (scrollTopNavLi.length && scrollTopConSingle.length) {
        const distance = scrollTopNavLi[0].offsetHeight;
        const { top } = scrollTopConSingle[0].getBoundingClientRect();
        if (top < distance) {
          this.NavBarFixed = true;
          for (let i = 0; i < scrollTopConSingle.length; i += 1) {
            if (
              i > 0 &&
              scrollTopConSingle[i - 1].getBoundingClientRect().top < 0
            ) {
              this.active = i;
            }
          }
        } else {
          this.NavBarFixed = false;
        }
      }
    },
    queryTabList() {
      const navList = tabListRes.data;
      // 收集tab数据列表的activityTagNo
      const arr = navList.map(ele => ele.activityTagNo);
      this.navList = navList;
      this.topList(arr);
    },
    // 获取商品列表数据
    async topList(val) {
      console.log(val);
      this.navdata = dataInfo.data;
      this.navList.forEach(ele => {
        ele.list = this.navdata[ele.activityTagNo] || [];
        ele.list.forEach(v => {
          if (v.productPicUrl) {
            v.productPicUrlImg = v.productPicUrl.split(',')[0];
          }
        });
      });
    }
  }
};
</script>
<style lang="scss">
.top_pro_wrap {
  .van-tabs--line {
    /*padding-top: 40px !important;*/
  }
  .van-tabs--line .van-tabs__wrap,
  .van-tabs__nav--line,
  .van-tabs__wrap {
    height: 40px !important;
  }
  .van-tabs__wrap {
    z-index: 2 !important;
  }
  .van-tabs__nav--line {
    padding-bottom: 0;
  }
  .van-tab {
    line-height: 40px;
    height: 40px !important;
  }
  .van-tabs__line {
    border-radius: 0;
    background: #fff url('../../assets/promotion/nav_active.png') no-repeat
      center / 15px 6px;
    height: 6px;
    bottom: 5px;
  }
  .van-tabs__wrap--scrollable .van-tab {
    /* flex: 0 0 15.1%;
    flex-basis: 15.1% !important; */
    flex: 0 0 auto !important;
    padding: 0 12.5px;
    color: #666;
  }
  .van-tab.van-tab--active {
    color: #e62525;
    font-weight: 500 !important;
  }
  .van-tabs__wrap--scrollable .van-tab p {
    font-size: 16px;
  }
  .van-tab {
    padding: 0;
  }
  .van-hairline--top-bottom::after,
  .van-hairline-unset--top-bottom::after {
    border-width: 0;
  }
}
</style>
<style lang="scss" scoped>
.fixed_nav_padding {
  position: fixed;
  top: 0;
  z-index: 2;
  width: 100%;
  background: #fff;
}
.ad_wraps {
  width: 100%;
  overflow-x: hidden;
  min-height: 100vh;
  padding-bottom: 40px;
  box-sizing: border-box;
  background-repeat: no-repeat;
  background-size: 100%;
  box-sizing: border-box;
  .ad_hot {
    width: 100%;
    .hot_title {
      width: 58.67%;
      margin: 10px auto;
      background: url('../../assets/promotion/hot_title.png') no-repeat left
        center / 100%;
      height: 21px;
    }
  }
  .list_wrap {
    padding-top: 8px;
  }
  .fixed_list_wrap {
    padding-top: 48px;
  }
  .btn_share {
    width: 100%;
    height: 40px;
    background: linear-gradient(
      135deg,
      rgba(255, 185, 90, 1) 0%,
      rgba(255, 43, 43, 1) 100%
    );
    font-size: 16px;
    font-family: PingFangSC, sans-serif;
    font-weight: 400;
    color: rgba(255, 255, 255, 1);
    line-height: 40px;
    border: none;
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 3;
  }
  .share_icon {
    width: 54px;
    height: 78px;
    display: block;
    position: fixed;
    right: 0;
    top: 40%;
    z-index: 3;
  }
}
</style>
